<template>
  <el-dialog
    title="用户批量上传"
    :close-on-click-modal="false" 
    :visible.sync="Modal"
    :before-close="handleClose"
    width="30%">
    <el-upload
      class="upload-demo"
      action="http://10.10.3.144:8050/api/users/upload"
      :auto-upload="false"
      ref="upload"
      :headers="header"
      :show-file-list="false"
      :on-progress="progress"
      :limit="1">
      <el-button size="small" type="primary">选择文件</el-button>
      <el-button size="small" type="primary" class="margin-t10">下载样例模板</el-button>
      <div slot="tip" class="el-upload__tip">只能上传exel文件，且不超过2000kb</div>
    </el-upload>

    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="submitUpload">上传</el-button>
    </span>
  </el-dialog>
</template>
<script>
  export default {
    props: {
      upLoadModal: {
        type: Boolean
      },
      header:{
        type: Object
      },
    },
    data() {
      return {
        Modal: this.upLoadModal,
        header: this.header
      };
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            this.Modal = false;
            this.$emit("closeUpload", this.Modal);
          })
          .catch(_ => {});
      },
      submitUpload() {
        this.$refs.upload.submit();
        this.Modal = false;
        this.$emit("closeUpload", this.Modal);
      },
      progress(){

      }
    },
    watch: {
      upLoadModal(newval) {
        if (newval) {
          this.Modal = newval;
        }
      }
    },
    mounted() {
      console.log(this.header)
    }
  };
</script>